import { func } from "prop-types"
import { createContext, useContext } from "react"

/** ##  useContext  函数组件传值
 *  ###  一、什么是useContext ?
 *          在Hooks出现之前，开发者都是使用的class组件，通过props传值。
 *          现在使用函数组件(Function)开发了，没有constructor构造函数也就没有了props的接收，所以父子组件传值就成了一个问题。
 *  ###  二、作用：
 *          1. useContext 可跨越组件层级直接传递变量，实现数据共享
 *          2. Context 对它所包含的组件树提供全局共享数据
 *  ###  三、实现步骤： 
 *          1. 使用createContext 创建Context对象
 *          2. 在顶层组件通过Provider 提供数据
 *          3. 在底层组件通过useContext 函数获取数据
 */

// 创建Context 对象(必须是同一个context对象)

// export function Bar(){
//     // 底层组件通过useContext 函数获取数据
//     const name = useContext(Context)
//     console.log(name,'获取的name');
//     return <div>Bar1 {name}</div>
// }

// export function Foo2() {
//     return <div>Foo2 <Bar/></div>
// }